<template>
  <view class="shoppingBox_content_location_tip" v-if="showTip">
    <view class="shoppingBox_content_location_tip_icon">
      <image src="/static/image/loca_sel_icon.png" mode="widthFix" />
    </view>
    <view class="shoppingBox_content_location_tip_title">开启定位享受服务</view>
    <view class="shoppingBox_content_location_tip_open" @click.stop="goSetting">立即开启</view>
    <view style="flex: 1"></view>
    <view class="shoppingBox_content_location_tip_close" @click.stop="closeDialog"> <image src="/static/image/loca_close_icon.png" mode="widthFix" /></view>
  </view>
</template>

<script>
export default {
  props: {
    showTip: {
      type: Boolean,
      default: 0,
    },
  },
  data() {
    return {}
  },

  methods: {
    closeDialog() {
      this.$emit('update:showTip', false)
    },
    goSetting() {
      const _that = this
      wx.openSetting({
        success(res) {
          _that.$emit('update:showTip', false)
          console.log('Setting opened:', res.authSetting)
          // 处理成功后的逻辑，比如用户是否授权了某些权限
        },
        fail(err) {
          console.error('Failed to open setting:', err)
        },
      })
    },
  },
}
</script>

<style scoped lang="scss">
.shoppingBox_content_location_tip {
  position: absolute;
  top: 10rpx;
  left: 20rpx;
  right: 20rpx;
  z-index: 999;
  background: url('/static/image/loca_tip.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* height: 80rpx; */
  display: flex;
  align-items: center;
  color: white;
  padding: 20rpx 20rpx 10rpx;
  &_icon {
    width: 30rpx;
  }
  &_title {
    margin: 0 20rpx;
  }
  &_open {
    background-color: #9fc85e;
    border-radius: 30rpx;
    font-size: 26rpx;
    padding: 8rpx 20rpx;
  }
  &_close {
    width: 40rpx;
  }
  /* &_bg {
          position: absolute;
          top: 0;
          
        } */
}
</style>
